import React, { useState, useCallback } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import {
  Button,
  Tabs,
  Row,
  Col,
  Table,
  List,
  Alert,
  Modal,
  message,
} from 'antd';
import {
  RedoOutlined,
  SearchOutlined,
  FileAddOutlined,
  DeleteColumnOutlined,
} from '@ant-design/icons';

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '操作',
    dataIndex: 'operator',
    key: 'operator',
    render: (text, row, index) => {
      return (
        <Button
          type="link"
          onClick={() => {
            Modal.info({
              title: `当前用户名字为${row.name}`,
            });
          }}
        >
          查看
        </Button>
      );
    },
  },
];

function callback(key) {
  console.log(key);
}

const initDataList = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
];

const TheFirstDay = () => {
  //List控件
  const [dataList, setDataList] = useState(initDataList);

  const addOneList = useCallback(() => {
    const newDataList = [].concat(dataList);
    newDataList.push({ title: 'Ant Design Title 5' });
    setDataList(newDataList);
  }, [dataList]);

  const delOneList = useCallback(() => {
    dataList.pop();
    setDataList([].concat(dataList));
  }, [dataList]);

  //Table控件
  const [data, setData] = useState(dataSource);
  const [isCurrent, setIsCurrent] = useState(false);

  const addOne = useCallback(() => {
    if (data && data.length >= 5) {
      message.warning('最多添加5条数据');
      setIsCurrent(true);
      return;
    }
    const newData = [].concat(data);
    newData.push({
      name: 'b',
      age: 21,
      address: 'address',
    });
    setData(newData);
  }, [data]);

  const delOne = useCallback(() => {
    data.pop();
    setData([].concat(data));
  }, [data]);
  
  const { TabPane } = Tabs;

  return (
    <>
      <Tabs onChange={callback} type="card">
        <TabPane tab="Tab 1" key="1">
          <Row>
            <Col span={8}>
              <Button icon={<SearchOutlined />}>搜索</Button>
            </Col>
            <Col span={8}>
              <Button icon={<RedoOutlined />}>重置</Button>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <Button icon={<SearchOutlined />}>搜索</Button>
            </Col>
            <Col span={8}>
              <Button icon={<RedoOutlined />}>重置</Button>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <Button icon={<SearchOutlined />}>搜索</Button>
            </Col>
            <Col span={8}>
              <Button icon={<RedoOutlined />}>重置</Button>
            </Col>
          </Row>
        </TabPane>
        <TabPane tab="Tab 2" key="2">
          {/* <Alert message="Warning" type="warning" showIcon /> */}
          {isCurrent && <Alert message="最多添加5条数据" type="warning" showIcon closable/>}
          <Button icon={<FileAddOutlined />} onClick={addOne}>
            新增
          </Button>
          <Button
            type="danger"
            icon={<DeleteColumnOutlined />}
            onClick={delOne}
          >
            删除
          </Button>
          <Table dataSource={data} columns={columns} />
        </TabPane>
        <TabPane tab="Tab 3" key="3">
          <Button icon={<FileAddOutlined />} onClick={addOneList}>
            新增
          </Button>
          <Button
            type="danger"
            icon={<DeleteColumnOutlined />}
            onClick={delOneList}
          >
            删除
          </Button>
          <List
            itemLayout="horizontal"
            dataSource={dataList}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta
                  title={item.title}
                  description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                />
              </List.Item>
            )}
          ></List>
        </TabPane>
      </Tabs>
    </>
  );
};

export default TheFirstDay;
